<template>
    <el-form label-position="left" status-icon
             ref="formRef" :model="form" :rules="rules">
        <el-form-item prop="no">
            <el-input size="large" clearable placeholder="请输入学号或工号" v-model="form.no">
                <template #prefix>
                    <el-icon :size="23">
                        <User/>
                    </el-icon>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input size="large" type="password" show-password placeholder="请输入密码"
                      v-model="form.password">
                <template #prefix>
                    <el-icon :size="23">
                        <Lock/>
                    </el-icon>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item prop="free">
            <el-radio-group v-model.number="form.free">
                <el-radio :label="7">7天免登录</el-radio>
                <el-radio :label="15">15天免登录</el-radio>
                <el-radio :label="30">30天免登录</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item>
            <el-button style="width: 100%" size="large" type="success" @click="doLogin">登录</el-button>
        </el-form-item>
        <div style="display: flex;justify-content: space-between;">
            <el-button link>账号激活</el-button>
            <el-button link>忘记密码</el-button>
        </div>
    </el-form>
</template>

<script setup>
import {ref} from 'vue'

import {ElMessage} from "element-plus";
import {Lock, User} from "@element-plus/icons-vue";

import {useUserStore} from "@/stores/user";
import {useRouter} from "vue-router";
import {loginAPI} from "@/apis/account";

const userStore = useUserStore()
const router = useRouter()

defineEmits(["update:tab"])

const form = ref({
    no: '',
    password: '',
    free: 0,
})

const rules = {
    account: [
        {required: true, message: '学号或工号不能为空', trigger: 'change'}
    ],
    password: [
        {required: true, message: '密码不能为空', trigger: 'change'},
        {min: 6, max: 10, message: '密码长度为6-14', trigger: 'change'}
    ]
}


const formRef = ref(null)

//登录
const doLogin = formEL => {
    formEL.validate(async (valid) => {
        if (valid) {
            const res = await loginAPI(form);
            if(res.code === 200){
                ElMessage({
                    message: "登陆成功",
                    type: 'success',
                    offset: window.innerHeight / 2,
                })
                router.push('/')
            }
        }
    })
}

</script>

<style scoped>

</style>